<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/common.js"></script>
    <script src="./js/vue.js"></script>
    <link rel="stylesheet" href="./css/animate.css">
    <style>
        *{
            padding:0;
            margin:0;
        }
        #app {
            background-image: url("./img/bg.png");
            background-repeat: no-repeat;
            background-size:auto 100%;
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
            overflow:hidden;
        }
        .a{
            background-image: url("./img/shan.png");
            background-repeat: no-repeat;
            background-size:auto 100%;
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
        .b{
            background-image: url("./img/shan2.png");
            background-repeat: no-repeat;
            background-size:auto 100%;
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
        .c{
            position:absolute;
            top: -0.5rem;
            left:0;
            width:100%;
        }
        .d{
            background-image: url("./img/bg2.png");
            background-repeat: no-repeat;
            background-size:100% auto;
            position:absolute;
            top: 10%;
            left: 10%;
            width: 80%;
            height: 170px;
            transform: rotate(10deg);
        }
        .d >img{
            padding: 0.13rem;
            width:95%;
        }
        .e{
            background-image: url("./img/bg2.png");
            background-repeat: no-repeat;
            background-size:100% auto;
            position:absolute;
            top: 43%;
            left: 13%;
            width: 80%;
            height: 170px;
            transform: rotate(345deg);
        }
        .e >img{
            padding: 0.13rem;
            width:95%;
        }
        .msg{
            position:absolute;
            top:32%;
            left:5%;
        }
        .msg>span{
            display:block;
            color:#FFDE8F;
            font-size: 0.8rem;
        }
        .text{
            position:absolute;
            bottom:20%;
            right:10%;
            text-align: right;
        }
        .text>span{
            display:block;
            font-size:0.4rem;
            color:#FFDE8F;
        }
    </style>
</head>
<body>
    <div id="app">
        <transition
        enter-active-class="animated fadeInDown" 
        :appear="true" 
        @after-enter=" flag1=true "
        >
            <img class="c" src="./img/yumao.png" alt="">
        </transition>
        <transition 
        enter-active-class="animated fadeIn" 
        @after-enter=" flag2=true "
        >
            <div v-show="flag1" class="a"></div>
        </transition>
        <transition 
        enter-active-class="animated fadeIn" 
        :appear="true" 
        @after-enter=" flag3=true "
        >
        <div v-show="flag2" class="b"></div>
        </transition>
        <transition
            enter-active-class="animated rollIn"
            @after-enter=" flag4=true "
        >
            <div v-show="flag3" class="d">
                <img src="./img/sd1.png" alt="">
            </div>
        </transition>
        <transition
            enter-active-class="animated rollIn"
            @after-enter=" flag5=true "
        >
        <div v-show="flag4" class="e">
            <img src="./img/sd2.png" alt="">
        </div>
        </transition>
        <transition
            enter-active-class="animated pulse"
            @after-enter=" flag6=true "
        >
        <div v-show="flag5" class="msg">
            <span>MERRY</span>
            <span>CHRISTMAS</span>
        </div>
        </transition>
        <transition
            enter-active-class="animated pulse"
            @after-enter=" flag6=true "
        >
        <div v-show="flag6" class="text">
            <span>圣诞的钟声悠扬</span>
            <span>恬静而温馨；圣洁的雪花飞扬</span>
            <span>裁一段钟声，拈一片雪花；浪漫而欢快</span>
        </div>
        </transition>
        <!--
         -->
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            flag1:false,
            flag2:false,
            flag3:false,
            flag4:false,
            flag5:false,
            flag6:false
        }
    });
</script>
</html>